<template>
    <div>
        <el-card style="margin: 0px 0px 20px; padding: 20px 0px;" shadow="always">
            <CategorySelect @getCategoryId="getCategoryId" :isShow="!scene==0"></CategorySelect>
        </el-card>
        <el-card style="border: 1px solid #eee;" :shadow="scene==0?'never':'always'">
            <!-- 默认展示spu的列表 -->
            <div v-show="scene==0">
                <!-- 添加spu按钮 -->
                <el-button type="primary" icon="el-icon-plus" :disabled="!category3Id"
                    style="margin-bottom: 20px; width: 120px;" @click="addSpu">添加SPU</el-button>
                <!-- spu列表 -->
                <el-table :data="spuList" stripe border empty-text="暂无数据" width="100%">
                    <el-table-column type="index" label="序号" width="120" align="center"></el-table-column>
                    <el-table-column prop="spuName" label="SPU名称" width="width" align="center"></el-table-column>
                    <el-table-column prop="description" label="SPU描述" width="width" align="center"></el-table-column>
                    <el-table-column prop="prop" label="操作" width="400" align="center">
                        <template slot-scope="{row,$index}">
                            <el-tooltip content="添加SKU" placement="bottom" :open-delay="600">
                                <el-button type="success" icon="el-icon-plus" size="small"></el-button>
                            </el-tooltip>
                            <el-tooltip content="SKU列表" placement="bottom" :open-delay="600">
                                <el-button type="info" icon="el-icon-info" size="small"></el-button>
                            </el-tooltip>
                            <el-tooltip content="编辑" placement="bottom" :open-delay="600">
                                <el-button type="primary" icon="el-icon-edit" size="small" @click="editSpu(row)">
                                </el-button>
                            </el-tooltip>
                            <el-tooltip content="删除" placement="bottom" :open-delay="600">
                                <el-button type="danger" icon="el-icon-delete" size="small"></el-button>
                            </el-tooltip>
                        </template>
                    </el-table-column>
                </el-table>
                <!-- 分页器 -->
                <!-- 
                    current-page: 当前是第几页
                    total: 一共有多少条数据需要展示
                    page-size: 每一页需要展示多少条数据
                    page-sizes: 设置每一页展示多少条数据
                    pager-count: 连续的页码数
                    layout: 设置分页器的布局| -> : 代表将箭头后的元素移动至页面最右端
                -->
                <el-pagination v-show="spuList.length>0" background style="margin-top: 30px; text-align: center;"
                    :current-page="page" :total="total" :page-size="limit" :page-sizes="[6,9,12]" :pager-count="7"
                    layout="prev,pager,next,jumper,->,sizes,total" @current-change="handleCurrentChange"
                    @size-change="handleSizeChange" @prev-click="handlePrevClick" @next-click="handleNextClick">
                </el-pagination>
            </div>
            <!-- 添加/修改spu -->
            <SpuForm v-show="scene==1" @cancelSpuForm="cancelSpuForm" ref="spu"></SpuForm>
            <!-- 添加sku -->
            <SkuForm v-show="scene==2"></SkuForm>
        </el-card>
    </div>
</template>
<script>
    import SpuForm from './SpuForm/index'
    import SkuForm from './SkuForm/index'
    export default {
        name: "Spu",
        components: {
            SpuForm,
            SkuForm
        },
        data() {
            return {
                category1Id: '', // 一级分类id
                category2Id: '', // 二级分类id
                category3Id: '', // 三级分类id
                spuList: [], // spu列表
                page: 1,  // 当前页码
                limit: 6, // 一页展示多少条数据
                total: 0, // 一共有多少条数据
                scene: 0, // 页面下半部分的状态  0：spu列表数据，默认状态  ||  1：添加/修改spu，点击添加/修改spu按钮  ||  2：添加sku，点击添加sku按钮
            }
        },
        methods: {
            // 通过自定义事件获取子组件的id
            getCategoryId({ categoryId, level }) {
                if (level == 1) { // 一级分类id
                    this.category1Id = categoryId
                    // 一级分类切换时清空二，三级分类id和spu列表的数据
                    this.category2Id = ''
                    this.category3Id = ''
                    this.spuList = []
                } else if (level == 2) { // 二级分类id
                    this.category2Id = categoryId
                    // 二级分类切换时清空三级分类id和spu列表的数据
                    this.category3Id = ''
                    this.spuList = []
                } else { // 三级分类
                    this.category3Id = categoryId
                    this.getSpuList() // 发送请求获取spu列表的数据
                }
            },
            // 获取spu列表数据
            async getSpuList() {
                const { page, limit, category3Id } = this
                const result = await this.$api.spu.reqGetSpuList(page, limit, category3Id)
                if (result.code == 200) {
                    this.total = result.data.total
                    this.spuList = result.data.records
                }
            },
            // 分页器相关方法
            // #region 
            // 切换页页码时触发 回调参数：当前页码
            handleCurrentChange(page) {
                this.page = page
                this.getSpuList()
            },
            // 切换页面显示数据条数时触发  回调参数：每页条数
            handleSizeChange(limit) {
                this.limit = limit
                this.getSpuList()
            },
            // 点击上一页时触发  回调参数：当前页码
            handlePrevClick(page) {
                this.page = page
                this.getSpuList()
            },
            // 点击下一页时触发  回调参数：当前页码
            handleNextClick(page) {
                this.page = page
                this.getSpuList()
            },
            // #endregion

            // 添加spu
            addSpu() {
                this.scene = 1 // 页面下半部分的状态
                this.isShow = false // 禁用三级联动
            },
            // 修改spu
            editSpu(row) {
                this.scene = 1 // 页面下半部分的状态
                this.isShow = false // 禁用三级联动
                // 通过$ref获取子组件的方法通知子组件发请求
                this.$refs.spu.initSpuData(row)
            },
            // 关闭Spu表单
            cancelSpuForm(scene) { // 通过自定义事件接受子组件传过来的参数
                this.scene = scene // 页面下半部分的状态|0
            }
        },
    }
</script>
<style>

</style>